<!-- 07.Article_page -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min.js"></script>
<script src="https://mydevasset.blob.core.windows.net/system-container/developer_image_viewer.js"></script>
<script src="https://mydevasset.blob.core.windows.net/system-container/developer_license_register_redev1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js"></script>

<div class="container-fluid" id="page-article">

  <div class="sideNav" id="sideNav">
  </div>

  <div class="article">
    <div class="body-search">
      <span class="fa fa-search fa-lg"></span>
      {{search}}
    </div>

    <article>
      <header class="article-header">
        <h1>
          {{#if article.internal}}
          <span class="visibility-internal" data-title="{{t 'internal'}}">
            <span class="visibility-internal-icon"></span>
          </span>
          {{/if}}
          {{article.title}}
        </h1>

        <div class="article-info">
          <div class="article-updated"><span class="article-updated-label">更新日時</span>{{date article.updated_at}}</div>
        </div>
      </header>
      <div class="section-subscribe dropdown subscribeSite" aria-haspopup="true">
        <a class="dropdown-toggle" role="button" aria-selected="false" href="#"><span class="fa fa-rss"></span>サイト更新情報をフォロー</a>
        <span class="dropdown-menu" role="menu" aria-expanded="false">
            <a rel="nofollow" role="menuitem" class="new-article" data-method="post" href="/hc/ja/sections/202364246/subscription?subscribe_to_grandchildren=false">新しい記事</a>
            <a rel="nofollow" role="menuitem" class="new-article-comments" data-method="post" href="/hc/ja/sections/202364246/subscription?subscribe_to_grandchildren=true">新しい記事とコメント</a>
            <a style="display: none" rel="nofollow" role="menuitem" class="stop-following" aria-selected="false" data-method="delete" href="/hc/ja/sections/202364246/subscription?to=section">フォローを止める</a>
        </span>
      </div>
      <div class="section-subscribe dropdown subscribeAPI" aria-haspopup="true">
        <a class="dropdown-toggle" role="button" aria-selected="false" href="#"><span class="fa fa-rss"></span>API更新情報をフォロー</a>
        <span class="dropdown-menu" role="menu" aria-expanded="false">
            <a rel="nofollow" role="menuitem" class="new-article" data-method="post" href="/hc/ja/sections/200129785/subscription?subscribe_to_grandchildren=false">新しい記事</a>
            <a rel="nofollow" role="menuitem" class="new-article-comments" data-method="post" href="/hc/ja/sections/200129785/subscription?subscribe_to_grandchildren=true">新しい記事とコメント</a>
            <a style="display: none" rel="nofollow" role="menuitem" class="stop-following" aria-selected="false" data-method="delete" href="/hc/ja/sections/200129785/subscription?to=section">フォローを止める</a>
        </span>
      </div>
      {{subscribe}}
      <div class="content-body article-body">
        {{article.body}}
      </div>

      <div class="article-attachments">
        <ul class="attachments">
          {{#each attachments}}
          <li>
            <a href="{{url}}" target="_blank">{{name}}</a>
            <span>({{size}})</span>
          </li>
          {{/each}}
        </ul>
      </div>

      <footer class="article-footer">
        {{share}}
      </footer>

      <section class="article-comments">
        <div class="article-comments-header">
          <h2>コメント</h2>
        </div>
        <div class="comment-list">
          {{#each comments}}
          <div id="{{anchor}}" class="comment">
            <header class="comment-header">
              {{#if official}}
              <span class="comment-official">{{t 'official_comment'}}</span>
              {{/if}}
              {{#if pending}}
              <span class="comment-pending">{{t 'pending_approval'}}</span>
              {{/if}}
              <div class="comment-avatar {{#if author.agent}} comment-avatar-agent{{/if}}">
                <img src="{{author.avatar_url}}" alt="Avatar" />
              </div>
              <strong class="comment-author" title="{{author.name}}">
                {{#link 'user_profile' id=author.id}}
                {{author.name}}
                {{/link}}
              </strong>
              {{date created_at class='comment-published'}}
            </header>

            <div class="content-body comment-body">{{body}}</div>

            {{#if editor}}
            <div class="comment-edited meta">
              {{t 'comment_edited' editor_name=editor.name}} {{date edited_at timeago=true}}
            </div>
            {{/if}}

            <footer class="comment-footer">
              <span class="comment-actions">
                {{#with ticket}}
                <a href="{{url}}" target="_zendesk_lotus" class="escalation-badge">
                  #{{id}}
                </a>
                {{/with}}
                {{actions}}
              </span>
            </footer>
          </div>
          {{/each}}
        </div>
        {{pagination}}
        <div class="comment-noLogin">{{comment_callout}}</div>

        {{#form 'comment' class='comment-form'}}
        <div class="comment-avatar">{{user_avatar class='user-avatar'}}</div>
        <div class="comment-container">
          {{wysiwyg 'body' rows='4'}}
          <div class="comment-form-controls">{{input type='submit'}}</div>
        </div>
        {{/form}}
      </section>
    </article>
  </div><!-- article -->
</div><!-- ./container-fluid -->

<script>
$(function() {
    copyBtn();
});
</script>
